<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>欢乐豆记录</title>
		<script src="js/jquery.js"></script>
		<script>
			//页面加载时触发
			$(function(){
				//查询欢乐豆记录的接口
				queryHistoryList();
			});
			
			//查询欢乐豆流水列表
			function queryHistoryList(){
				
				//获取当前登录用户id
				var uid = localStorage.getItem("uid");
				
				$.ajax({
					type: "GET",
					url: "http://localhost:8080/happybean/list",
					data: {
						uid: uid
					},
					success: function(data){
						console.log(data);
						
						//data -> 记录列表
						//for -> data -> <tr></tr> -> <tbody>
						for(var i = 0; i < data.length; i++){
							//从data数组中取出第i条记录
							var item = data[i];
							
							var source = "";
							if(item.source == 0){
								source = "充值";
							} else if(item.source == 1){
								source = "对局";
							} else if(item.source == 2){
								source = "系统赠送";
							}
							
							var html = "<tr><td>" + item.id + "</td> <td>" 
								+ (item.type == 0 ? "+" : "-") + item.beanNumber + "</td> <td>"
								+ item.createTime + "</td> <td>" 
								+ source + "</td></tr>";
								
							$("#mytbody").append(html);	
						}
					}
				});
			}
		</script>
		<style>
			.body_class {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			
			.table_class {
				width: 80%;
				text-align: center;
			}
			
			.table_class td{
				padding: 20px;
				border: 1px solid white;
			}
			
			.table_class thead tr {
				background-color: aquamarine;
			}
			
			.table_class tbody tr:nth-child(even) {
				background-color: #FFFFFF;
			}
			
			.table_class tbody tr:nth-child(odd) {
				background-color: gainsboro;
			}
			
		
		</style>
	</head>
	<body class="body_class">
		<h1>欢乐豆记录列表</h1>
		
		<table class="table_class">
			<thead>
				<tr>
					<td>编号</td> 
					<td>欢乐豆操作数</td>
					<td>操作时间</td>
					<td>操作类型</td>
				</tr>
			</thead>
			<tbody id="mytbody">
				
			</tbody>
		</table>
	</body>
</html>
